<template>
	<view class="calendar">
		<view class="toubugud">
			<view class="top-handle">
				<view class="prev" @click="selectUser(0)">
					<view class="yuefen">{{cur_month < 10?'0'+cur_month|| "--":cur_month || "--"}}</view>
					<view>
						<view>{{cur_year || "--"}} 年</view>
						<view class="yuefxz">月份</view>
					</view>
				</view>
				<view @click="selectUser(0)">
					<view class="xuanznianyk">
						<image class="xuanznyt" src="../../static/yuef.png" />
						<view>选择年月</view>
					</view>
				</view>
			</view>
			<view class="wanqutoubu">
				<view class="liangbduiq">
					<view class="hxjjbuj">
						<view class="qiehuanan" @click="qiehuanhz">{{dqname.name}}</view>
						<view class="haixxuanzk" v-if="haizlb">
							<view v-for="(item,index) in myhzlist" :key="index" class="haizsfk"
								@click="xuanzxues(index)">
								<view>{{item.name}}</view>
							</view>
						</view>
					</view>
					<view class="kechengbt">
						<view class="shili">
							<view class="jiang">迟到</view>
							<view class="day quant">8</view>
						</view>
						<view class="shili">
							<view class="jiang">请假</view>
							<view class="day youke">8</view>
						</view>
					</view>
				</view>
				<!-- 周表 -->
				<view class="weeks">
					<view class="week" v-for="(item,idx) in weeks_ch" :key="idx">{{item}}</view>
				</view>
			</view>
		</view>
		<view class="page-body" :key='shuaxin'>
			<view class="days">
				<view v-if="hasEmptyGrid" class="inner" v-for="(item,idx) in empytGrids" :key="idx"></view>
				<view class="inner" v-for="(item,idx) in days" :key="idx">
					<view
						:class="item.ril > dqshij ? 'day guos': item.ril == dqshij ? 'day dangt':item.qiand == 1 ? 'day quant':item.qiand == 0.5 ? 'day youke':'day'">
						{{item.ril == dqshij?'今天':item.day}}
					</view>
				</view>
			</view>
		</view>
		<view class="kechbwk">
			<view class="xzshijian">当月考勤情况</view>
			<view class="biaodanwk" v-if="dyztians.cgts==0">没有上班记录哦</view>
			<view v-else>
				<view class="chugxx">
					<view class="xinxi">当月上班天数{{dyztians.cgts}}天,其中{{dyztians.quant}}天迟到,{{dyztians.bant}}请徦</view>
				</view>
				<view class="chugxx">
					<view class="gongzi">当月工资{{dygongz}}元</view>
				</view>
			</view>
		</view>
		<view class="nymengban" v-if="yuefxzk">
			<view class="nianyuexzk" v-if="gongn==0">
				<view class="hxjjbuj">
					<view @click="jiajiannian('prev')">《</view>
					<view class="nianxz">{{cur_year}}</view>
					<view @click="jiajiannian">》</view>
				</view>
				<view class="ruefenqu">
					<view class="yuefys" v-for="(item,index) in yuefnexz" :key="index"
						@click="handleCalendar(item.yue)">{{item.mot}}</view>
				</view>
				<view class="kongzann">
					<button class="dayfh" @click="toDoday">今天</button>
					<button @click="selectUser">关闭</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StaffSchedulingData: [], //排班结果
				shuaxin: 0,
				dqname: {
					name: '黄小妹'
				},
				hasEmptyGrid: false,
				yuefxzk: false,
				gongn: 0,
				haizlb: false,
				weeks_ch: [],
				dqshij: null,
				cur_year: null,
				cur_month: null,
				cur_date: null,
				dqxzriq: '', //当前选择日期
				gongs: 1, //选择工时
				dyztians: { //当月出工
					cgts: 0,
					quant: 0,
					bant: 0
				},
				dygongz: 0, //当月工资
				days: [],
				empytGrids: [],
				myhzlist: [{
					name: '黄小妹'
				}, {
					name: '李雷'
				}, {
					name: '韩梅梅'
				}],
				yuefnexz: [{
					yue: 1,
					mot: '1月份'
				}, {
					yue: 2,
					mot: '2月份'
				}, {
					yue: 3,
					mot: '3月份'
				}, {
					yue: 4,
					mot: '4月份'
				}, {
					yue: 5,
					mot: '5月份'
				}, {
					yue: 6,
					mot: '6月份'
				}, {
					yue: 7,
					mot: '7月份'
				}, {
					yue: 8,
					mot: '8月份'
				}, {
					yue: 9,
					mot: '9月份'
				}, {
					yue: 10,
					mot: '10月份'
				}, {
					yue: 11,
					mot: '11月份'
				}, {
					yue: 12,
					mot: '12月份'
				}],
			}
		},
		onLoad(options) {
			this.goujianrili();
			let yg_id = options.yg_id;
			this.getStaffScheduling(yg_id)
			// this.getgzreny(options.id,options.rwid);
			// this.getgzrylist(options.rwid);
		},
		onReady: function() {},
		onShow: function() {


		},
		methods: {
			//获取员工排班结果
			getStaffScheduling(user_id) {
				console.log("员工id:" + user_id)
				let _that = this;
				uni.request({
					url: getApp().globalData.url + '/client/GetBaiblist?id=' + user_id,
					method: 'GET',
					data: {},
					header: {
						"Content-Type": "application/json"
					},
					success: function(res) {
						// console.log(888, res)
						if (res.data.code == 200 && res.data.msg == '查询成功') {
							_that.StaffSchedulingData = res.data.data;
							_that.bianli();
						} else if (res.data.code == 400) {
							uni.showToast({
								icon: 'none',
								position: 'center',
								title: "查询排班数据为空"
							});
						} else {
							uni.showToast({
								icon: 'none',
								position: 'center',
								title: "请求异常"
							});
						}
					}
				})
			},
			bianli() {
				for (let i = 0; i < this.StaffSchedulingData.length; i++) {
					let sbriqFlag = this.StaffSchedulingData[i].sbriq
					if (sbriqFlag != null && sbriqFlag != 'undefind' && sbriqFlag != '') {
						if (this.StaffSchedulingData[i].kqzt == 0) {
				
						}
					}
				}
			},
			// 选择工时
			xuanzgs(gongs) {
				this.gongs = gongs;
			},
			// 获取人员信息
			getgzreny(id, rwid) {
				var that = this;
				wx.request({
					url: getApp().globalData.url + '/api/GetRwryxq',
					data: {
						id: id,
						rwid: rwid,
					},
					header: {
						"Content-Type": "application/json"
					},
					success: function(res) {
						console.log(res.data.data[0])
						that.dqname = res.data.data[0];
						var gongyue = res.data.data[0].gongshi[0].kgriqi;
						var index = gongyue.lastIndexOf("/");
						var str = gongyue.substring(0, index);
						let idx = str.lastIndexOf("/")
						var yuef = str.substring(idx + 1, str.length);
						console.log(yuef)
						that.handleCalendar(yuef);
						that.selectUser();
						// var daya = that.days;
						// if(daya.length != 0){
						//     var kecheng=res.data.data[0].gongshi
						//     if(kecheng.length > 0){
						//         for(let i=0;i<daya.length;i++){
						// 			for(let j=0;j<kecheng.length;j++){
						// 				var data = new Date(kecheng[j].kgriqi)
						// 				if(daya[i].ril==data.getTime()){
						// 					daya[i].qiand = kecheng[j].gshi;
						// 					daya[i].openid = kecheng[j].openid;
						// 					daya[i].id = kecheng[j].id
						// 				}
						// 			} 
						//         };
						//         that.days=daya;
						// 		that.chugongsum(daya);
						// 		wx.hideLoading();
						//     }else{
						//         that.calculateDays(that.cur_year, that.cur_month);
						// 		wx.hideLoading();
						//     }
						// }
					}
				})
			},
			// 获取人员列表
			getgzrylist(rwid) {
				var that = this;
				wx.request({
					url: getApp().globalData.url + '/api/GetRwrylist',
					data: {
						rwid: rwid,
					},
					header: {
						"Content-Type": "application/json"
					},
					success: function(res) {
						that.myhzlist = res.data.data;

					}
				})
			},
			// 构建日历
			goujianrili() {
				const date = new Date();
				var dqshij = new Date(date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate());
				const cur_year = date.getFullYear();
				const cur_month = date.getMonth() + 1;
				const cur_date = date.getDate();
				const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
				this.calculateDays(cur_year, cur_month);
				this.calculateEmptyGrids(cur_year, cur_month);
				this.dqshij = dqshij.getTime();
				this.cur_year = cur_year;
				this.cur_month = cur_month;
				this.cur_date = cur_date;
				this.weeks_ch = weeks_ch;
			},
			getTodayMsg(yera, month, day, dqzt) {
				var xzshij = new Date(yera + "/" + month + "/" + day);
				var dqshij = this.dqshij;
				if (xzshij.getTime() <= dqshij) {
					if (dqzt == 0) {
						this.dqxzriq = yera + "/" + month + "/" + day;
						this.selectUser(1);
					} else {
						wx.showToast({
							title: '已签到了',
							icon: 'none',
							duration: 2000
						})
					}
				} else {
					wx.showToast({
						title: '还没到开工时间',
						icon: 'none',
						duration: 2000
					})
				}
			},

			getThisMonthDays(year, month) {
				return new Date(year, month, 0).getDate(); //返回一个月总天数 

			},
			getFirstDayOfWeek(year, month) {
				return new Date(Date.UTC(year, month - 1, 1)).getDay(); //返回1号是星期几
			},
			calculateEmptyGrids(year, month) {
				const firstDayOfWeek = this.getFirstDayOfWeek(year, month); //返回1号是星期几
				let empytGrids = [];
				if (firstDayOfWeek > 0) {
					for (let i = 0; i < firstDayOfWeek; i++) {
						empytGrids.push(i); //前面加空天数
					}
					this.hasEmptyGrid = true;
					this.empytGrids = empytGrids;
					// console.log("empytGrids数据:",this.empytGrids)
				} else {
					this.hasEmptyGrid = false;
					this.empytGrids = [];
				}
			},
			calculateDays(year, month) {
				// console.log('传入的年月值',year+"--"+month);
				let days = [];
				const thisMonthDays = this.getThisMonthDays(year, month); //返回一个月总天数 
				for (let i = 1; i <= thisMonthDays; i++) {
					var data = new Date(year + '/' + month + '/' + i)
					days.push({
						day: i,
						qiand: 1,
						ril: data.getTime(),
						openid: '',
						id: -1
					});
				};
				this.days = days;
				// console.log(6666,this.days)

			},
			toDoday() { //回到今天
				const date = new Date();
				const cur_year = date.getFullYear();
				const cur_month = date.getMonth() + 1;
				const cur_date = date.getDate();
				this.cur_year = cur_year; //年
				this.cur_month = cur_month; //月
				this.cur_date = cur_date; //天
				this.selectUser();
				this.calculateDays(this.cur_year, this.cur_month);
				// this.xiugairili();
				this.shuaxin++
			},
			// 选择人员
			xuanzxues(index) {
				this.dqname = this.myhzlist[index];
				this.qiehuanhz();
				// this.xiugairili();
			},
			// 修改日历结构
			xiugairili() {
				uni.showLoading({
					title: '加载中...'
				});
				var that = this;
				that.calculateDays(that.cur_year, that.cur_month);
				var daya = that.days;
				if (daya.length != 0) {
					var kecheng = that.dqname.gongshi
					if (kecheng.length > 0) {
						for (let i = 0; i < daya.length; i++) {
							for (let j = 0; j < kecheng.length; j++) {
								var data = new Date(kecheng[j].kgriqi)
								if (daya[i].ril == data.getTime()) {
									daya[i].qiand = kecheng[j].gshi;
									daya[i].openid = kecheng[j].openid;
									daya[i].id = kecheng[j].id
								}
							}
						};
						that.days = daya;
						that.chugongsum(daya);
						uni.hideLoading();
					} else {
						that.calculateDays(that.cur_year, that.cur_month);
						uni.hideLoading();
					}
				}
			},
			// 弹出操作
			selectUser(lxxz) {
				this.gongn = lxxz;
				this.yuefxzk = !this.yuefxzk
			},
			// 加年份或减年份
			jiajiannian(jian) {
				var year = this.cur_year;
				var handle = jian;
				if (handle === 'prev') {
					this.cur_year = year - 1
				} else {
					this.cur_year = year + 1
				}
			},
			// 选择月份
			handleCalendar(yue) {
				var newMonth = yue;
				var newYear = this.cur_year;
				this.calculateDays(newYear, newMonth); //重新计算天数
				this.calculateEmptyGrids(newYear, newMonth); //重新计算空格
				this.cur_month = newMonth;
				this.cur_year = newYear;
				this.selectUser();
				// this.xiugairili();
			},
			qiehuanhz() {
				this.haizlb = !this.haizlb;
			},
			// 统计出工情况
			chugongsum(yuefen) {
				var quanri = 0;
				var banri = 0;
				console.log(yuefen)
				for (let i = 0; i < yuefen.length; i++) {
					if (yuefen[i].qiand == 1) {
						quanri = quanri + 1
					} else if (yuefen[i].qiand == 0.5) {
						banri = banri + 1
					}
				};
				this.dyztians = {
					cgts: quanri + banri,
					quant: quanri,
					bant: banri
				};
				this.dygongz = quanri * this.dqname.quangj + banri * this.dqname.bangj;
			},
		}
	}
</script>

<style>
	.calendar {
		display: flex;
		width: 100%;
		min-height: 100%;
		flex-direction: column;
		/* top: 44px; */
	}

	.toubugud {
		position: fixed;
		width: 100%;
		top: 44px;
		background: #4ABEC2;
		z-index: 99;
	}

	.top-handle {
		display: flex;
		height: 200rpx;
		align-items: center;
		padding: 0 30rpx 0 30rpx;
		justify-content: space-between;
		color: #ffffff;
	}

	.wanqutoubu {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		border-radius: 30rpx 30rpx 0 0;
		background: #ffffff;
		padding: 30rpx 0 30rpx 0;
	}

	.prev {
		display: flex;
		align-items: center;
		text-align: left;
		color: #E7F8F3;
	}

	.liangbduiq {
		display: flex;
		align-items: center;
		padding: 0rpx 50rpx 20rpx 40rpx;
		justify-content: space-between;
	}

	.kechengbt {
		display: flex;
		align-items: center;
	}

	.shili {
		display: flex;
		align-items: center;
		color: #2C405A;
		margin-left: 30rpx;
	}

	.jiang {
		font-size: 35rpx;
		margin-right: 10rpx;
	}

	.hxjjbuj {
		display: flex;
		align-items: center;
	}

	.haiztx {
		width: 70rpx;
		height: 70rpx;
		border-radius: 35rpx;
		margin-right: 20rpx;
	}

	.xuexiaoys {
		font-size: 25rpx;
		color: #B2B2B2;
		width: 150rpx;
	}

	.shuolv {
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.qiehuanan {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200rpx;
		height: 60rpx;
		border-radius: 35rpx;
		border: solid 1rpx #4ABEC2;
		color: #4ABEC2;
		margin-left: 20rpx;
	}

	.yuefen {
		margin-top: 40rpx;
		font-size: 150rpx;
		margin-right: 20rpx;
		color: #ffffff;
	}

	.yuefxz {
		font-size: 25rpx;
	}

	.xuanznianyk {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 25rpx;
	}

	.xuanznyt {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.page-body {
		width: 100%;
		background: #ffffff;
		margin-top: 398rpx;
	}

	.weeks {
		padding: 0rpx 30rpx 0 30rpx;
		background: #F9F9F9;
		height: 50rpx;
		line-height: 50rpx;
		opacity: 0.5;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		font-size: 28rpx;
	}

	.week {
		text-align: center;
		flex-grow: 1;
		color: #3b3b3b;
	}

	.days {
		display: flex;
		box-sizing: border-box;
		height: 500rpx;
		flex-wrap: wrap;
		flex-direction: row;
		margin-left: 30rpx;
	}

	.days .inner {
		display: flex;
		box-sizing: border-box;
		/*width: 107.1428571429rpx;*/
		width: 98rpx;
		align-items: center;
		justify-content: center;
	}

	.day {
		display: flex;
		width: 70rpx;
		height: 70rpx;
		color: #3b3b3b;
		font-size: 28rpx;
		font-weight: 200;
		position: relative;
		left: 0;
		top: 0;
		align-items: center;
		justify-content: center;
	}

	.day::before {
		display: block;
		content: "";
		width: 10rpx;
		height: 10rpx;
		background: #29beb2;
		border-radius: 50%;
		position: absolute;
		bottom: 4rpx;
		left: 50%;
		transform: translateX(-50%);
		visibility: hidden;
	}

	.day.on {
		background: #FFA31C;
		border-radius: 50%;
		border: solid 1px transparent;
		color: #ffffff;
	}

	.day.guos {
		color: #b6b6b6;
	}

	.day.dangt {
		background: #4ABEC2;
		border-radius: 50%;
		border: solid 1px transparent;
		color: #ffffff;
	}

	.day.quant {
		background: #9dc5de;
		border-radius: 50%;
		border: solid 1px transparent;
		color: #ffffff;
	}

	.day.youke {
		background: #E7F8F3;
		border-radius: 50%;
		border: solid 1px transparent;
		color: #4ABEC2;
	}

	/* 课程表 */
	.kechbwk {
		background: #F9F9F9;
		padding: 30rpx;
	}

	.xzshijian {
		font-size: 40rpx;
	}

	.biaodanwk {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
		border-radius: 20rpx;
		background: #ffffff;
		padding: 30rpx;
	}

	.chugxx {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin-top: 30rpx;
	}

	.xinxi {
		font-weight: bold;
		color: #007AFF;
	}

	.gongzi {
		font-weight: bold;
		color: #ff226f;
	}

	.haixxuanzk {
		position: absolute;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		z-index: 999;
		padding: 0 50rpx 50rpx 50rpx;
		left: 0rpx;
		top: 320rpx;
		background: #ffffff;
		border-bottom: solid 1rpx #EEEEEE;
	}

	.haizsfk {
		display: flex;
		align-items: center;
		background: rgb(241, 243, 243);
		padding: 20rpx 30rpx 20rpx 30rpx;
		border-radius: 20rpx;
		margin: 30rpx 30rpx 0 0;
	}

	.shangkdz {
		display: block;
		width: 300rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* 年月选择 */
	.nymengban {
		position: fixed;
		background: #0000009c;
		top: 0rpx;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.nianyuexzk {
		background: #ffffff;
		width: 500rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.nianxz {
		margin: 0 100rpx 0 100rpx;
	}

	.hengxzy {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 400rpx;
		margin-top: 30rpx;
	}

	.xuanze {
		padding: 30rpx 50rpx;
		background: #73bed9;
		border-radius: 20rpx;
		color: #ffffff;
	}

	.weixuan {
		padding: 30rpx 50rpx;
		background: #ececec;
		border-radius: 20rpx;
		color: #8c8c8c;
	}

	.ruefenqu {
		width: 440rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin-top: 20rpx;
	}

	.yuefys {
		padding: 20rpx;
	}

	.kongzann {
		width: 440rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
	}

	.dayfh {
		background: #4ABEC2;
		color: #fff;
	}
</style>
